<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>iconfont Demo</title>
        <link
            rel="shortcut icon"
            href="//img.alicdn.com/imgextra/i2/O1CN01ZyAlrn1MwaMhqz36G_!!6000000001499-73-tps-64-64.ico"
            type="image/x-icon"
        />
        <link
            rel="icon"
            type="image/svg+xml"
            href="//img.alicdn.com/imgextra/i4/O1CN01EYTRnJ297D6vehehJ_!!6000000008020-55-tps-64-64.svg"
        />
        <link rel="stylesheet" href="https://g.alicdn.com/thx/cube/1.3.2/cube.min.css" />
        <link rel="stylesheet" href="demo.css" />
        <link rel="stylesheet" href="iconfont.css" />
        <script src="iconfont.js"></script>
        <!-- jQuery -->
        <script src="https://a1.alicdn.com/oss/uploads/2018/12/26/7bfddb60-08e8-11e9-9b04-53e73bb6408b.js"></script>
        <!-- 代码高亮 -->
        <script src="https://a1.alicdn.com/oss/uploads/2018/12/26/a3f714d0-08e6-11e9-8a15-ebf944d7534c.js"></script>
        <style>
            .main .logo {
                margin-top: 0;
                height: auto;
            }

            .main .logo a {
                display: flex;
                align-items: center;
            }

            .main .logo .sub-title {
                margin-left: 0.5em;
                font-size: 22px;
                color: #fff;
                background: linear-gradient(-45deg, #3967ff, #b500fe);
                -webkit-background-clip: text;
                -webkit-text-fill-color: transparent;
            }
        </style>
    </head>
    <body>
        <div class="main">
            <h1 class="logo">
                <a href="https://www.iconfont.cn/" title="iconfont 首页" target="_blank">
                    <img
                        width="200"
                        src="https://img.alicdn.com/imgextra/i3/O1CN01Mn65HV1FfSEzR6DKv_!!6000000000514-55-tps-228-59.svg"
                    />
                </a>
            </h1>
            <div class="nav-tabs">
                <ul id="tabs" class="dib-box">
                    <li class="dib active"><span>Unicode</span></li>
                    <li class="dib"><span>Font class</span></li>
                    <li class="dib"><span>Symbol</span></li>
                </ul>

                <a
                    href="https://www.iconfont.cn/manage/index?manage_type=myprojects&projectId=2786219"
                    target="_blank"
                    class="nav-more"
                    >查看项目</a
                >
            </div>
            <div class="tab-container">
                <div class="content unicode" style="display: block">
                    <ul class="icon_lists dib-box">
                        <li class="dib">
                            <span class="icon iconfont">&#xe7c2;</span>
                            <div class="name">分层配置</div>
                            <div class="code-name">&amp;#xe7c2;</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont">&#xe6f9;</span>
                            <div class="name">integral</div>
                            <div class="code-name">&amp;#xe6f9;</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont">&#xe701;</span>
                            <div class="name">play</div>
                            <div class="code-name">&amp;#xe701;</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont">&#xe752;</span>
                            <div class="name">gift</div>
                            <div class="code-name">&amp;#xe752;</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont">&#xe75a;</span>
                            <div class="name">office-supplies</div>
                            <div class="code-name">&amp;#xe75a;</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont">&#xe75c;</span>
                            <div class="name">operation</div>
                            <div class="code-name">&amp;#xe75c;</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont">&#xe75d;</span>
                            <div class="name">phone</div>
                            <div class="code-name">&amp;#xe75d;</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont">&#xe75e;</span>
                            <div class="name">print</div>
                            <div class="code-name">&amp;#xe75e;</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont">&#xe772;</span>
                            <div class="name">invoice</div>
                            <div class="code-name">&amp;#xe772;</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont">&#xe7cc;</span>
                            <div class="name">cascades</div>
                            <div class="code-name">&amp;#xe7cc;</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont">&#xe753;</span>
                            <div class="name">image-text</div>
                            <div class="code-name">&amp;#xe753;</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont">&#xe75b;</span>
                            <div class="name">packaging</div>
                            <div class="code-name">&amp;#xe75b;</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont">&#xe6d1;</span>
                            <div class="name">砍价</div>
                            <div class="code-name">&amp;#xe6d1;</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont">&#xe7b4;</span>
                            <div class="name">file done</div>
                            <div class="code-name">&amp;#xe7b4;</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont">&#xe7cf;</span>
                            <div class="name">shopping</div>
                            <div class="code-name">&amp;#xe7cf;</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont">&#xe7d3;</span>
                            <div class="name">carry out</div>
                            <div class="code-name">&amp;#xe7d3;</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont">&#xe7d4;</span>
                            <div class="name">calendar-check</div>
                            <div class="code-name">&amp;#xe7d4;</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont">&#xe7da;</span>
                            <div class="name">sound</div>
                            <div class="code-name">&amp;#xe7da;</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont">&#xe7de;</span>
                            <div class="name">mail</div>
                            <div class="code-name">&amp;#xe7de;</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont">&#xe842;</span>
                            <div class="name">gift</div>
                            <div class="code-name">&amp;#xe842;</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont">&#xe8e8;</span>
                            <div class="name">comment</div>
                            <div class="code-name">&amp;#xe8e8;</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont">&#xe90e;</span>
                            <div class="name">Field-time</div>
                            <div class="code-name">&amp;#xe90e;</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont">&#xe747;</span>
                            <div class="name">certified-supplier</div>
                            <div class="code-name">&amp;#xe747;</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont">&#xe74a;</span>
                            <div class="name">coupons</div>
                            <div class="code-name">&amp;#xe74a;</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont">&#xe74b;</span>
                            <div class="name">data</div>
                            <div class="code-name">&amp;#xe74b;</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont">&#xe74c;</span>
                            <div class="name">Customer management</div>
                            <div class="code-name">&amp;#xe74c;</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont">&#xe751;</span>
                            <div class="name">feeds</div>
                            <div class="code-name">&amp;#xe751;</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont">&#xe759;</span>
                            <div class="name">New user zone</div>
                            <div class="code-name">&amp;#xe759;</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont">&#xe76a;</span>
                            <div class="name">trade alert</div>
                            <div class="code-name">&amp;#xe76a;</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont">&#xe76b;</span>
                            <div class="name">top sales</div>
                            <div class="code-name">&amp;#xe76b;</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont">&#xe76c;</span>
                            <div class="name">trading volume</div>
                            <div class="code-name">&amp;#xe76c;</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont">&#xe76f;</span>
                            <div class="name">store</div>
                            <div class="code-name">&amp;#xe76f;</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont">&#xe774;</span>
                            <div class="name">wallet</div>
                            <div class="code-name">&amp;#xe774;</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont">&#xe7b2;</span>
                            <div class="name">comments</div>
                            <div class="code-name">&amp;#xe7b2;</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont">&#xe7b5;</span>
                            <div class="name">trading data</div>
                            <div class="code-name">&amp;#xe7b5;</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont">&#xe7c4;</span>
                            <div class="name">申请记录</div>
                            <div class="code-name">&amp;#xe7c4;</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont">&#xe7c9;</span>
                            <div class="name">中间人</div>
                            <div class="code-name">&amp;#xe7c9;</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont">&#xe7ca;</span>
                            <div class="name">账户操作</div>
                            <div class="code-name">&amp;#xe7ca;</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont">&#xe7d5;</span>
                            <div class="name">通讯录</div>
                            <div class="code-name">&amp;#xe7d5;</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont">&#xe7d6;</span>
                            <div class="name">已关注供应商</div>
                            <div class="code-name">&amp;#xe7d6;</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont">&#xe834;</span>
                            <div class="name">icon_164</div>
                            <div class="code-name">&amp;#xe834;</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont">&#xe833;</span>
                            <div class="name">微信</div>
                            <div class="code-name">&amp;#xe833;</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont">&#xe827;</span>
                            <div class="name">icon_59</div>
                            <div class="code-name">&amp;#xe827;</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont">&#xe6b4;</span>
                            <div class="name">小程序设置</div>
                            <div class="code-name">&amp;#xe6b4;</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont">&#xe857;</span>
                            <div class="name">icon_511</div>
                            <div class="code-name">&amp;#xe857;</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont">&#xe860;</span>
                            <div class="name">icon_563</div>
                            <div class="code-name">&amp;#xe860;</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont">&#xe88f;</span>
                            <div class="name">icon_777</div>
                            <div class="code-name">&amp;#xe88f;</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont">&#xe82c;</span>
                            <div class="name">icon_52</div>
                            <div class="code-name">&amp;#xe82c;</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont">&#xe828;</span>
                            <div class="name">icon_48</div>
                            <div class="code-name">&amp;#xe828;</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont">&#xe829;</span>
                            <div class="name">icon_41</div>
                            <div class="code-name">&amp;#xe829;</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont">&#xe82b;</span>
                            <div class="name">icon_56</div>
                            <div class="code-name">&amp;#xe82b;</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont">&#xe82f;</span>
                            <div class="name">icon_136</div>
                            <div class="code-name">&amp;#xe82f;</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont">&#xe830;</span>
                            <div class="name">icon_141</div>
                            <div class="code-name">&amp;#xe830;</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont">&#xe831;</span>
                            <div class="name">icon_137</div>
                            <div class="code-name">&amp;#xe831;</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont">&#xe82a;</span>
                            <div class="name">icon_95</div>
                            <div class="code-name">&amp;#xe82a;</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont">&#xe861;</span>
                            <div class="name">icon_551</div>
                            <div class="code-name">&amp;#xe861;</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont">&#xe880;</span>
                            <div class="name">icon_710</div>
                            <div class="code-name">&amp;#xe880;</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont">&#xe887;</span>
                            <div class="name">icon_744</div>
                            <div class="code-name">&amp;#xe887;</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont">&#xe889;</span>
                            <div class="name">icon_754</div>
                            <div class="code-name">&amp;#xe889;</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont">&#xe896;</span>
                            <div class="name">icon_808</div>
                            <div class="code-name">&amp;#xe896;</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont">&#xe897;</span>
                            <div class="name">icon_810</div>
                            <div class="code-name">&amp;#xe897;</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont">&#xe8a1;</span>
                            <div class="name">icon_850</div>
                            <div class="code-name">&amp;#xe8a1;</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont">&#xe8a9;</span>
                            <div class="name">icon_880</div>
                            <div class="code-name">&amp;#xe8a9;</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont">&#xe826;</span>
                            <div class="name">icon_30</div>
                            <div class="code-name">&amp;#xe826;</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont">&#xe82d;</span>
                            <div class="name">icon_130</div>
                            <div class="code-name">&amp;#xe82d;</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont">&#xe82e;</span>
                            <div class="name">icon_138</div>
                            <div class="code-name">&amp;#xe82e;</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont">&#xe832;</span>
                            <div class="name">icon_170</div>
                            <div class="code-name">&amp;#xe832;</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont">&#xe84c;</span>
                            <div class="name">icon_415</div>
                            <div class="code-name">&amp;#xe84c;</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont">&#xe84f;</span>
                            <div class="name">icon_436</div>
                            <div class="code-name">&amp;#xe84f;</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont">&#xe853;</span>
                            <div class="name">icon_460</div>
                            <div class="code-name">&amp;#xe853;</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont">&#xe854;</span>
                            <div class="name">icon_457</div>
                            <div class="code-name">&amp;#xe854;</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont">&#xe85c;</span>
                            <div class="name">icon_542</div>
                            <div class="code-name">&amp;#xe85c;</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont">&#xe85d;</span>
                            <div class="name">icon_545</div>
                            <div class="code-name">&amp;#xe85d;</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont">&#xe866;</span>
                            <div class="name">icon_595</div>
                            <div class="code-name">&amp;#xe866;</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont">&#xe86f;</span>
                            <div class="name">icon_643</div>
                            <div class="code-name">&amp;#xe86f;</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont">&#xe870;</span>
                            <div class="name">icon_644</div>
                            <div class="code-name">&amp;#xe870;</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont">&#xe871;</span>
                            <div class="name">icon_645</div>
                            <div class="code-name">&amp;#xe871;</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont">&#xe872;</span>
                            <div class="name">icon_646</div>
                            <div class="code-name">&amp;#xe872;</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont">&#xe875;</span>
                            <div class="name">icon_663</div>
                            <div class="code-name">&amp;#xe875;</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont">&#xe877;</span>
                            <div class="name">icon_673</div>
                            <div class="code-name">&amp;#xe877;</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont">&#xe879;</span>
                            <div class="name">icon_684</div>
                            <div class="code-name">&amp;#xe879;</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont">&#xe87e;</span>
                            <div class="name">icon_695</div>
                            <div class="code-name">&amp;#xe87e;</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont">&#xe657;</span>
                            <div class="name">menu_goods</div>
                            <div class="code-name">&amp;#xe657;</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont">&#xe658;</span>
                            <div class="name">menu_sort</div>
                            <div class="code-name">&amp;#xe658;</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont">&#xe653;</span>
                            <div class="name">menu_danwei</div>
                            <div class="code-name">&amp;#xe653;</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont">&#xe654;</span>
                            <div class="name">menu_pingjia</div>
                            <div class="code-name">&amp;#xe654;</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont">&#xe655;</span>
                            <div class="name">menu_pinpai</div>
                            <div class="code-name">&amp;#xe655;</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont">&#xe656;</span>
                            <div class="name">menu_gongyingshang</div>
                            <div class="code-name">&amp;#xe656;</div>
                        </li>
                    </ul>
                    <div class="article markdown">
                        <h2 id="unicode-">Unicode 引用</h2>
                        <hr />

                        <p>Unicode 是字体在网页端最原始的应用方式，特点是：</p>
                        <ul>
                            <li>支持按字体的方式去动态调整图标大小，颜色等等。</li>
                            <li>默认情况下不支持多色，直接添加多色图标会自动去色。</li>
                        </ul>
                        <blockquote>
                            <p>
                                注意：新版 iconfont 支持两种方式引用多色图标：SVG symbol
                                引用方式和彩色字体图标模式。（使用彩色字体图标需要在「编辑项目」中开启「彩色」选项后并重新生成。）
                            </p>
                        </blockquote>
                        <p>Unicode 使用步骤如下：</p>
                        <h3 id="-font-face">第一步：拷贝项目下面生成的 <code>@font-face</code></h3>
                        <pre><code class="language-css"
>@font-face {
  font-family: 'iconfont';
  src: url('iconfont.woff2?t=1638503419755') format('woff2'),
       url('iconfont.woff?t=1638503419755') format('woff'),
       url('iconfont.ttf?t=1638503419755') format('truetype');
}
</code></pre>
                        <h3 id="-iconfont-">第二步：定义使用 iconfont 的样式</h3>
                        <pre><code class="language-css"
>.iconfont {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
</code></pre>
                        <h3 id="-">第三步：挑选相应图标并获取字体编码，应用于页面</h3>
                        <pre>
<code class="language-html"
>&lt;span class="iconfont"&gt;&amp;#x33;&lt;/span&gt;
</code></pre>
                        <blockquote>
                            <p>"iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。</p>
                        </blockquote>
                    </div>
                </div>
                <div class="content font-class">
                    <ul class="icon_lists dib-box">
                        <li class="dib">
                            <span class="icon iconfont icon_kdzs_mdsz"></span>
                            <div class="name">分层配置</div>
                            <div class="code-name">.icon_kdzs_mdsz</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont icon_xpdy_mbgl"></span>
                            <div class="name">integral</div>
                            <div class="code-name">.icon_xpdy_mbgl</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont icon_xcxzb_zb"></span>
                            <div class="name">play</div>
                            <div class="code-name">.icon_xcxzb_zb</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont icon_xycj_cj"></span>
                            <div class="name">gift</div>
                            <div class="code-name">.icon_xycj_cj</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont icon_kdzs_fjrmb"></span>
                            <div class="name">office-supplies</div>
                            <div class="code-name">.icon_kdzs_fjrmb</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont operation"></span>
                            <div class="name">operation</div>
                            <div class="code-name">.operation</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont icon_pcshop"></span>
                            <div class="name">phone</div>
                            <div class="code-name">.icon_pcshop</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont icon_xpdy_dyjgl"></span>
                            <div class="name">print</div>
                            <div class="code-name">.icon_xpdy_dyjgl</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont icon_kdzs_pldy"></span>
                            <div class="name">invoice</div>
                            <div class="code-name">.icon_kdzs_pldy</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont icon_kdzs_mdmb"></span>
                            <div class="name">cascades</div>
                            <div class="code-name">.icon_kdzs_mdmb</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont icon_qudao_h5"></span>
                            <div class="name">image-text</div>
                            <div class="code-name">.icon_qudao_h5</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont icon_fenxiao_goods"></span>
                            <div class="name">packaging</div>
                            <div class="code-name">.icon_fenxiao_goods</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont icon_kanjia"></span>
                            <div class="name">砍价</div>
                            <div class="code-name">.icon_kanjia</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont icon_hexiao_order"></span>
                            <div class="name">file done</div>
                            <div class="code-name">.icon_hexiao_order</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont icon_pintuan"></span>
                            <div class="name">shopping</div>
                            <div class="code-name">.icon_pintuan</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont carryout"></span>
                            <div class="name">carry out</div>
                            <div class="code-name">.carryout</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont icon_qiandao_jilu"></span>
                            <div class="name">calendar-check</div>
                            <div class="code-name">.icon_qiandao_jilu</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont icon_notice"></span>
                            <div class="name">sound</div>
                            <div class="code-name">.icon_notice</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont icon_notice_mail"></span>
                            <div class="name">mail</div>
                            <div class="code-name">.icon_notice_mail</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont gift"></span>
                            <div class="name">gift</div>
                            <div class="code-name">.gift</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont icon_notice_buyer"></span>
                            <div class="name">comment</div>
                            <div class="code-name">.icon_notice_buyer</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont Field-time"></span>
                            <div class="name">Field-time</div>
                            <div class="code-name">.Field-time</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont icon_hexiao_member2"></span>
                            <div class="name">certified-supplier</div>
                            <div class="code-name">.icon_hexiao_member2</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont icon_coupons"></span>
                            <div class="name">coupons</div>
                            <div class="code-name">.icon_coupons</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont icon_coupons_data"></span>
                            <div class="name">data</div>
                            <div class="code-name">.icon_coupons_data</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont icon_fenxiao_member"></span>
                            <div class="name">Customer management</div>
                            <div class="code-name">.icon_fenxiao_member</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont icon_qiandao_guize"></span>
                            <div class="name">feeds</div>
                            <div class="code-name">.icon_qiandao_guize</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont icon_pintuan2"></span>
                            <div class="name">New user zone</div>
                            <div class="code-name">.icon_pintuan2</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont icon_notice_seller"></span>
                            <div class="name">trade alert</div>
                            <div class="code-name">.icon_notice_seller</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont icon_pintuan_data"></span>
                            <div class="name">top sales</div>
                            <div class="code-name">.icon_pintuan_data</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont icon_fenxiao_data"></span>
                            <div class="name">trading volume</div>
                            <div class="code-name">.icon_fenxiao_data</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont icon_ziti_store"></span>
                            <div class="name">store</div>
                            <div class="code-name">.icon_ziti_store</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont wallet"></span>
                            <div class="name">wallet</div>
                            <div class="code-name">.wallet</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont icon_kefu_comments"></span>
                            <div class="name">comments</div>
                            <div class="code-name">.icon_kefu_comments</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont tradingdata"></span>
                            <div class="name">trading data</div>
                            <div class="code-name">.tradingdata</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont icon_fenxiao_order"></span>
                            <div class="name">申请记录</div>
                            <div class="code-name">.icon_fenxiao_order</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont icon_hexiao_member"></span>
                            <div class="name">中间人</div>
                            <div class="code-name">.icon_hexiao_member</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont icon_fenxiao_set"></span>
                            <div class="name">账户操作</div>
                            <div class="code-name">.icon_fenxiao_set</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont icon_fenxiao_grade"></span>
                            <div class="name">通讯录</div>
                            <div class="code-name">.icon_fenxiao_grade</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont yiguanzhugongyingshang"></span>
                            <div class="name">已关注供应商</div>
                            <div class="code-name">.yiguanzhugongyingshang</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont icon_user_gaikuang"></span>
                            <div class="name">icon_164</div>
                            <div class="code-name">.icon_user_gaikuang</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont icon_qudao_weixin"></span>
                            <div class="name">微信</div>
                            <div class="code-name">.icon_qudao_weixin</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont icon_qudao_app"></span>
                            <div class="name">icon_59</div>
                            <div class="code-name">.icon_qudao_app</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont icon_qudao_xiaochengxu"></span>
                            <div class="name">小程序设置</div>
                            <div class="code-name">.icon_qudao_xiaochengxu</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont icon_dianpu_daohang"></span>
                            <div class="name">icon_511</div>
                            <div class="code-name">.icon_dianpu_daohang</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont icon_yingxiao_qipao"></span>
                            <div class="name">icon_563</div>
                            <div class="code-name">.icon_yingxiao_qipao</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont icon_set_jiaoyi"></span>
                            <div class="name">icon_777</div>
                            <div class="code-name">.icon_set_jiaoyi</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont icon_caiwu_yue"></span>
                            <div class="name">icon_52</div>
                            <div class="code-name">.icon_caiwu_yue</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont icon_caiwu_tixian"></span>
                            <div class="name">icon_48</div>
                            <div class="code-name">.icon_caiwu_tixian</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont icon_caiwu_jifen"></span>
                            <div class="name">icon_41</div>
                            <div class="code-name">.icon_caiwu_jifen</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont icon_shuju_liuliang"></span>
                            <div class="name">icon_56</div>
                            <div class="code-name">.icon_shuju_liuliang</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont icon_user_dengji"></span>
                            <div class="name">icon_136</div>
                            <div class="code-name">.icon_user_dengji</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont icon_user_guanli"></span>
                            <div class="name">icon_141</div>
                            <div class="code-name">.icon_user_guanli</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont icon_user_biaoqian"></span>
                            <div class="name">icon_137</div>
                            <div class="code-name">.icon_user_biaoqian</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont icon_order_shouhou"></span>
                            <div class="name">icon_95</div>
                            <div class="code-name">.icon_order_shouhou</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont icon_copy"></span>
                            <div class="name">icon_551</div>
                            <div class="code-name">.icon_copy</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont icon_set_product"></span>
                            <div class="name">icon_710</div>
                            <div class="code-name">.icon_set_product</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont icon_set_save"></span>
                            <div class="name">icon_744</div>
                            <div class="code-name">.icon_set_save</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont icon_dianpu_fenlei"></span>
                            <div class="name">icon_754</div>
                            <div class="code-name">.icon_dianpu_fenlei</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont icon_dianpu_fengge"></span>
                            <div class="name">icon_808</div>
                            <div class="code-name">.icon_dianpu_fengge</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont icon_dianpu_sucai"></span>
                            <div class="name">icon_810</div>
                            <div class="code-name">.icon_dianpu_sucai</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont icon_dianpu_xiangqing"></span>
                            <div class="name">icon_850</div>
                            <div class="code-name">.icon_dianpu_xiangqing</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont icon_order_guanli"></span>
                            <div class="name">icon_880</div>
                            <div class="code-name">.icon_order_guanli</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont icon_caiwu"></span>
                            <div class="name">icon_30</div>
                            <div class="code-name">.icon_caiwu</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont icon_user"></span>
                            <div class="name">icon_130</div>
                            <div class="code-name">.icon_user</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont icon_set_user"></span>
                            <div class="name">icon_138</div>
                            <div class="code-name">.icon_set_user</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont icon_shuju"></span>
                            <div class="name">icon_170</div>
                            <div class="code-name">.icon_shuju</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont icon_dianpu_home"></span>
                            <div class="name">icon_415</div>
                            <div class="code-name">.icon_dianpu_home</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont icon_yingyongcenter"></span>
                            <div class="name">icon_436</div>
                            <div class="code-name">.icon_yingyongcenter</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont icon_qudao"></span>
                            <div class="name">icon_460</div>
                            <div class="code-name">.icon_qudao</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont icon_qudao2"></span>
                            <div class="name">icon_457</div>
                            <div class="code-name">.icon_qudao2</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont icon_set_store"></span>
                            <div class="name">icon_542</div>
                            <div class="code-name">.icon_set_store</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont icon_dianpu_weiyem"></span>
                            <div class="name">icon_545</div>
                            <div class="code-name">.icon_dianpu_weiyem</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont icon_set_quanxian"></span>
                            <div class="name">icon_595</div>
                            <div class="code-name">.icon_set_quanxian</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont icon_hide"></span>
                            <div class="name">icon_643</div>
                            <div class="code-name">.icon_hide</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont icon_show"></span>
                            <div class="name">icon_644</div>
                            <div class="code-name">.icon_show</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont icon_wallet"></span>
                            <div class="name">icon_645</div>
                            <div class="code-name">.icon_wallet</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont icon_set_pay"></span>
                            <div class="name">icon_646</div>
                            <div class="code-name">.icon_set_pay</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont icon_set_weihu"></span>
                            <div class="name">icon_663</div>
                            <div class="code-name">.icon_set_weihu</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont icon_set_peisong"></span>
                            <div class="name">icon_673</div>
                            <div class="code-name">.icon_set_peisong</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont icon_yingxiaowf"></span>
                            <div class="name">icon_684</div>
                            <div class="code-name">.icon_yingxiaowf</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont icon_dianpu_shoppingCar"></span>
                            <div class="name">icon_695</div>
                            <div class="code-name">.icon_dianpu_shoppingCar</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont icon_goods"></span>
                            <div class="name">menu_goods</div>
                            <div class="code-name">.icon_goods</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont icon_sort"></span>
                            <div class="name">menu_sort</div>
                            <div class="code-name">.icon_sort</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont icon_danwei"></span>
                            <div class="name">menu_danwei</div>
                            <div class="code-name">.icon_danwei</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont icon_pingjia"></span>
                            <div class="name">menu_pingjia</div>
                            <div class="code-name">.icon_pingjia</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont icon_pinpai"></span>
                            <div class="name">menu_pinpai</div>
                            <div class="code-name">.icon_pinpai</div>
                        </li>

                        <li class="dib">
                            <span class="icon iconfont icon_gongyingshang"></span>
                            <div class="name">menu_gongyingshang</div>
                            <div class="code-name">.icon_gongyingshang</div>
                        </li>
                    </ul>
                    <div class="article markdown">
                        <h2 id="font-class-">font-class 引用</h2>
                        <hr />

                        <p>
                            font-class 是 Unicode 使用方式的一种变种，主要是解决 Unicode 书写不直观，语意不明确的问题。
                        </p>
                        <p>与 Unicode 使用方式相比，具有如下特点：</p>
                        <ul>
                            <li>相比于 Unicode 语意明确，书写更直观。可以很容易分辨这个 icon 是什么。</li>
                            <li>
                                因为使用 class 来定义图标，所以当要替换图标时，只需要修改 class 里面的 Unicode 引用。
                            </li>
                        </ul>
                        <p>使用步骤如下：</p>
                        <h3 id="-fontclass-">第一步：引入项目下面生成的 fontclass 代码：</h3>
                        <pre><code class="language-html">&lt;link rel="stylesheet" href="./iconfont.css"&gt;
</code></pre>
                        <h3 id="-">第二步：挑选相应图标并获取类名，应用于页面：</h3>
                        <pre><code class="language-html">&lt;span class="iconfont xxx"&gt;&lt;/span&gt;
</code></pre>
                        <blockquote>
                            <p>" iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。</p>
                        </blockquote>
                    </div>
                </div>
                <div class="content symbol">
                    <ul class="icon_lists dib-box">
                        <li class="dib">
                            <svg class="icon svg-icon" aria-hidden="true">
                                <use xlink:href="#icon_kdzs_mdsz"></use>
                            </svg>
                            <div class="name">分层配置</div>
                            <div class="code-name">#icon_kdzs_mdsz</div>
                        </li>

                        <li class="dib">
                            <svg class="icon svg-icon" aria-hidden="true">
                                <use xlink:href="#icon_xpdy_mbgl"></use>
                            </svg>
                            <div class="name">integral</div>
                            <div class="code-name">#icon_xpdy_mbgl</div>
                        </li>

                        <li class="dib">
                            <svg class="icon svg-icon" aria-hidden="true">
                                <use xlink:href="#icon_xcxzb_zb"></use>
                            </svg>
                            <div class="name">play</div>
                            <div class="code-name">#icon_xcxzb_zb</div>
                        </li>

                        <li class="dib">
                            <svg class="icon svg-icon" aria-hidden="true">
                                <use xlink:href="#icon_xycj_cj"></use>
                            </svg>
                            <div class="name">gift</div>
                            <div class="code-name">#icon_xycj_cj</div>
                        </li>

                        <li class="dib">
                            <svg class="icon svg-icon" aria-hidden="true">
                                <use xlink:href="#icon_kdzs_fjrmb"></use>
                            </svg>
                            <div class="name">office-supplies</div>
                            <div class="code-name">#icon_kdzs_fjrmb</div>
                        </li>

                        <li class="dib">
                            <svg class="icon svg-icon" aria-hidden="true">
                                <use xlink:href="#operation"></use>
                            </svg>
                            <div class="name">operation</div>
                            <div class="code-name">#operation</div>
                        </li>

                        <li class="dib">
                            <svg class="icon svg-icon" aria-hidden="true">
                                <use xlink:href="#icon_pcshop"></use>
                            </svg>
                            <div class="name">phone</div>
                            <div class="code-name">#icon_pcshop</div>
                        </li>

                        <li class="dib">
                            <svg class="icon svg-icon" aria-hidden="true">
                                <use xlink:href="#icon_xpdy_dyjgl"></use>
                            </svg>
                            <div class="name">print</div>
                            <div class="code-name">#icon_xpdy_dyjgl</div>
                        </li>

                        <li class="dib">
                            <svg class="icon svg-icon" aria-hidden="true">
                                <use xlink:href="#icon_kdzs_pldy"></use>
                            </svg>
                            <div class="name">invoice</div>
                            <div class="code-name">#icon_kdzs_pldy</div>
                        </li>

                        <li class="dib">
                            <svg class="icon svg-icon" aria-hidden="true">
                                <use xlink:href="#icon_kdzs_mdmb"></use>
                            </svg>
                            <div class="name">cascades</div>
                            <div class="code-name">#icon_kdzs_mdmb</div>
                        </li>

                        <li class="dib">
                            <svg class="icon svg-icon" aria-hidden="true">
                                <use xlink:href="#icon_qudao_h5"></use>
                            </svg>
                            <div class="name">image-text</div>
                            <div class="code-name">#icon_qudao_h5</div>
                        </li>

                        <li class="dib">
                            <svg class="icon svg-icon" aria-hidden="true">
                                <use xlink:href="#icon_fenxiao_goods"></use>
                            </svg>
                            <div class="name">packaging</div>
                            <div class="code-name">#icon_fenxiao_goods</div>
                        </li>

                        <li class="dib">
                            <svg class="icon svg-icon" aria-hidden="true">
                                <use xlink:href="#icon_kanjia"></use>
                            </svg>
                            <div class="name">砍价</div>
                            <div class="code-name">#icon_kanjia</div>
                        </li>

                        <li class="dib">
                            <svg class="icon svg-icon" aria-hidden="true">
                                <use xlink:href="#icon_hexiao_order"></use>
                            </svg>
                            <div class="name">file done</div>
                            <div class="code-name">#icon_hexiao_order</div>
                        </li>

                        <li class="dib">
                            <svg class="icon svg-icon" aria-hidden="true">
                                <use xlink:href="#icon_pintuan"></use>
                            </svg>
                            <div class="name">shopping</div>
                            <div class="code-name">#icon_pintuan</div>
                        </li>

                        <li class="dib">
                            <svg class="icon svg-icon" aria-hidden="true">
                                <use xlink:href="#carryout"></use>
                            </svg>
                            <div class="name">carry out</div>
                            <div class="code-name">#carryout</div>
                        </li>

                        <li class="dib">
                            <svg class="icon svg-icon" aria-hidden="true">
                                <use xlink:href="#icon_qiandao_jilu"></use>
                            </svg>
                            <div class="name">calendar-check</div>
                            <div class="code-name">#icon_qiandao_jilu</div>
                        </li>

                        <li class="dib">
                            <svg class="icon svg-icon" aria-hidden="true">
                                <use xlink:href="#icon_notice"></use>
                            </svg>
                            <div class="name">sound</div>
                            <div class="code-name">#icon_notice</div>
                        </li>

                        <li class="dib">
                            <svg class="icon svg-icon" aria-hidden="true">
                                <use xlink:href="#icon_notice_mail"></use>
                            </svg>
                            <div class="name">mail</div>
                            <div class="code-name">#icon_notice_mail</div>
                        </li>

                        <li class="dib">
                            <svg class="icon svg-icon" aria-hidden="true">
                                <use xlink:href="#gift"></use>
                            </svg>
                            <div class="name">gift</div>
                            <div class="code-name">#gift</div>
                        </li>

                        <li class="dib">
                            <svg class="icon svg-icon" aria-hidden="true">
                                <use xlink:href="#icon_notice_buyer"></use>
                            </svg>
                            <div class="name">comment</div>
                            <div class="code-name">#icon_notice_buyer</div>
                        </li>

                        <li class="dib">
                            <svg class="icon svg-icon" aria-hidden="true">
                                <use xlink:href="#Field-time"></use>
                            </svg>
                            <div class="name">Field-time</div>
                            <div class="code-name">#Field-time</div>
                        </li>

                        <li class="dib">
                            <svg class="icon svg-icon" aria-hidden="true">
                                <use xlink:href="#icon_hexiao_member2"></use>
                            </svg>
                            <div class="name">certified-supplier</div>
                            <div class="code-name">#icon_hexiao_member2</div>
                        </li>

                        <li class="dib">
                            <svg class="icon svg-icon" aria-hidden="true">
                                <use xlink:href="#icon_coupons"></use>
                            </svg>
                            <div class="name">coupons</div>
                            <div class="code-name">#icon_coupons</div>
                        </li>

                        <li class="dib">
                            <svg class="icon svg-icon" aria-hidden="true">
                                <use xlink:href="#icon_coupons_data"></use>
                            </svg>
                            <div class="name">data</div>
                            <div class="code-name">#icon_coupons_data</div>
                        </li>

                        <li class="dib">
                            <svg class="icon svg-icon" aria-hidden="true">
                                <use xlink:href="#icon_fenxiao_member"></use>
                            </svg>
                            <div class="name">Customer management</div>
                            <div class="code-name">#icon_fenxiao_member</div>
                        </li>

                        <li class="dib">
                            <svg class="icon svg-icon" aria-hidden="true">
                                <use xlink:href="#icon_qiandao_guize"></use>
                            </svg>
                            <div class="name">feeds</div>
                            <div class="code-name">#icon_qiandao_guize</div>
                        </li>

                        <li class="dib">
                            <svg class="icon svg-icon" aria-hidden="true">
                                <use xlink:href="#icon_pintuan2"></use>
                            </svg>
                            <div class="name">New user zone</div>
                            <div class="code-name">#icon_pintuan2</div>
                        </li>

                        <li class="dib">
                            <svg class="icon svg-icon" aria-hidden="true">
                                <use xlink:href="#icon_notice_seller"></use>
                            </svg>
                            <div class="name">trade alert</div>
                            <div class="code-name">#icon_notice_seller</div>
                        </li>

                        <li class="dib">
                            <svg class="icon svg-icon" aria-hidden="true">
                                <use xlink:href="#icon_pintuan_data"></use>
                            </svg>
                            <div class="name">top sales</div>
                            <div class="code-name">#icon_pintuan_data</div>
                        </li>

                        <li class="dib">
                            <svg class="icon svg-icon" aria-hidden="true">
                                <use xlink:href="#icon_fenxiao_data"></use>
                            </svg>
                            <div class="name">trading volume</div>
                            <div class="code-name">#icon_fenxiao_data</div>
                        </li>

                        <li class="dib">
                            <svg class="icon svg-icon" aria-hidden="true">
                                <use xlink:href="#icon_ziti_store"></use>
                            </svg>
                            <div class="name">store</div>
                            <div class="code-name">#icon_ziti_store</div>
                        </li>

                        <li class="dib">
                            <svg class="icon svg-icon" aria-hidden="true">
                                <use xlink:href="#wallet"></use>
                            </svg>
                            <div class="name">wallet</div>
                            <div class="code-name">#wallet</div>
                        </li>

                        <li class="dib">
                            <svg class="icon svg-icon" aria-hidden="true">
                                <use xlink:href="#icon_kefu_comments"></use>
                            </svg>
                            <div class="name">comments</div>
                            <div class="code-name">#icon_kefu_comments</div>
                        </li>

                        <li class="dib">
                            <svg class="icon svg-icon" aria-hidden="true">
                                <use xlink:href="#tradingdata"></use>
                            </svg>
                            <div class="name">trading data</div>
                            <div class="code-name">#tradingdata</div>
                        </li>

                        <li class="dib">
                            <svg class="icon svg-icon" aria-hidden="true">
                                <use xlink:href="#icon_fenxiao_order"></use>
                            </svg>
                            <div class="name">申请记录</div>
                            <div class="code-name">#icon_fenxiao_order</div>
                        </li>

                        <li class="dib">
                            <svg class="icon svg-icon" aria-hidden="true">
                                <use xlink:href="#icon_hexiao_member"></use>
                            </svg>
                            <div class="name">中间人</div>
                            <div class="code-name">#icon_hexiao_member</div>
                        </li>

                        <li class="dib">
                            <svg class="icon svg-icon" aria-hidden="true">
                                <use xlink:href="#icon_fenxiao_set"></use>
                            </svg>
                            <div class="name">账户操作</div>
                            <div class="code-name">#icon_fenxiao_set</div>
                        </li>

                        <li class="dib">
                            <svg class="icon svg-icon" aria-hidden="true">
                                <use xlink:href="#icon_fenxiao_grade"></use>
                            </svg>
                            <div class="name">通讯录</div>
                            <div class="code-name">#icon_fenxiao_grade</div>
                        </li>

                        <li class="dib">
                            <svg class="icon svg-icon" aria-hidden="true">
                                <use xlink:href="#yiguanzhugongyingshang"></use>
                            </svg>
                            <div class="name">已关注供应商</div>
                            <div class="code-name">#yiguanzhugongyingshang</div>
                        </li>

                        <li class="dib">
                            <svg class="icon svg-icon" aria-hidden="true">
                                <use xlink:href="#icon_user_gaikuang"></use>
                            </svg>
                            <div class="name">icon_164</div>
                            <div class="code-name">#icon_user_gaikuang</div>
                        </li>

                        <li class="dib">
                            <svg class="icon svg-icon" aria-hidden="true">
                                <use xlink:href="#icon_qudao_weixin"></use>
                            </svg>
                            <div class="name">微信</div>
                            <div class="code-name">#icon_qudao_weixin</div>
                        </li>

                        <li class="dib">
                            <svg class="icon svg-icon" aria-hidden="true">
                                <use xlink:href="#icon_qudao_app"></use>
                            </svg>
                            <div class="name">icon_59</div>
                            <div class="code-name">#icon_qudao_app</div>
                        </li>

                        <li class="dib">
                            <svg class="icon svg-icon" aria-hidden="true">
                                <use xlink:href="#icon_qudao_xiaochengxu"></use>
                            </svg>
                            <div class="name">小程序设置</div>
                            <div class="code-name">#icon_qudao_xiaochengxu</div>
                        </li>

                        <li class="dib">
                            <svg class="icon svg-icon" aria-hidden="true">
                                <use xlink:href="#icon_dianpu_daohang"></use>
                            </svg>
                            <div class="name">icon_511</div>
                            <div class="code-name">#icon_dianpu_daohang</div>
                        </li>

                        <li class="dib">
                            <svg class="icon svg-icon" aria-hidden="true">
                                <use xlink:href="#icon_yingxiao_qipao"></use>
                            </svg>
                            <div class="name">icon_563</div>
                            <div class="code-name">#icon_yingxiao_qipao</div>
                        </li>

                        <li class="dib">
                            <svg class="icon svg-icon" aria-hidden="true">
                                <use xlink:href="#icon_set_jiaoyi"></use>
                            </svg>
                            <div class="name">icon_777</div>
                            <div class="code-name">#icon_set_jiaoyi</div>
                        </li>

                        <li class="dib">
                            <svg class="icon svg-icon" aria-hidden="true">
                                <use xlink:href="#icon_caiwu_yue"></use>
                            </svg>
                            <div class="name">icon_52</div>
                            <div class="code-name">#icon_caiwu_yue</div>
                        </li>

                        <li class="dib">
                            <svg class="icon svg-icon" aria-hidden="true">
                                <use xlink:href="#icon_caiwu_tixian"></use>
                            </svg>
                            <div class="name">icon_48</div>
                            <div class="code-name">#icon_caiwu_tixian</div>
                        </li>

                        <li class="dib">
                            <svg class="icon svg-icon" aria-hidden="true">
                                <use xlink:href="#icon_caiwu_jifen"></use>
                            </svg>
                            <div class="name">icon_41</div>
                            <div class="code-name">#icon_caiwu_jifen</div>
                        </li>

                        <li class="dib">
                            <svg class="icon svg-icon" aria-hidden="true">
                                <use xlink:href="#icon_shuju_liuliang"></use>
                            </svg>
                            <div class="name">icon_56</div>
                            <div class="code-name">#icon_shuju_liuliang</div>
                        </li>

                        <li class="dib">
                            <svg class="icon svg-icon" aria-hidden="true">
                                <use xlink:href="#icon_user_dengji"></use>
                            </svg>
                            <div class="name">icon_136</div>
                            <div class="code-name">#icon_user_dengji</div>
                        </li>

                        <li class="dib">
                            <svg class="icon svg-icon" aria-hidden="true">
                                <use xlink:href="#icon_user_guanli"></use>
                            </svg>
                            <div class="name">icon_141</div>
                            <div class="code-name">#icon_user_guanli</div>
                        </li>

                        <li class="dib">
                            <svg class="icon svg-icon" aria-hidden="true">
                                <use xlink:href="#icon_user_biaoqian"></use>
                            </svg>
                            <div class="name">icon_137</div>
                            <div class="code-name">#icon_user_biaoqian</div>
                        </li>

                        <li class="dib">
                            <svg class="icon svg-icon" aria-hidden="true">
                                <use xlink:href="#icon_order_shouhou"></use>
                            </svg>
                            <div class="name">icon_95</div>
                            <div class="code-name">#icon_order_shouhou</div>
                        </li>

                        <li class="dib">
                            <svg class="icon svg-icon" aria-hidden="true">
                                <use xlink:href="#icon_copy"></use>
                            </svg>
                            <div class="name">icon_551</div>
                            <div class="code-name">#icon_copy</div>
                        </li>

                        <li class="dib">
                            <svg class="icon svg-icon" aria-hidden="true">
                                <use xlink:href="#icon_set_product"></use>
                            </svg>
                            <div class="name">icon_710</div>
                            <div class="code-name">#icon_set_product</div>
                        </li>

                        <li class="dib">
                            <svg class="icon svg-icon" aria-hidden="true">
                                <use xlink:href="#icon_set_save"></use>
                            </svg>
                            <div class="name">icon_744</div>
                            <div class="code-name">#icon_set_save</div>
                        </li>

                        <li class="dib">
                            <svg class="icon svg-icon" aria-hidden="true">
                                <use xlink:href="#icon_dianpu_fenlei"></use>
                            </svg>
                            <div class="name">icon_754</div>
                            <div class="code-name">#icon_dianpu_fenlei</div>
                        </li>

                        <li class="dib">
                            <svg class="icon svg-icon" aria-hidden="true">
                                <use xlink:href="#icon_dianpu_fengge"></use>
                            </svg>
                            <div class="name">icon_808</div>
                            <div class="code-name">#icon_dianpu_fengge</div>
                        </li>

                        <li class="dib">
                            <svg class="icon svg-icon" aria-hidden="true">
                                <use xlink:href="#icon_dianpu_sucai"></use>
                            </svg>
                            <div class="name">icon_810</div>
                            <div class="code-name">#icon_dianpu_sucai</div>
                        </li>

                        <li class="dib">
                            <svg class="icon svg-icon" aria-hidden="true">
                                <use xlink:href="#icon_dianpu_xiangqing"></use>
                            </svg>
                            <div class="name">icon_850</div>
                            <div class="code-name">#icon_dianpu_xiangqing</div>
                        </li>

                        <li class="dib">
                            <svg class="icon svg-icon" aria-hidden="true">
                                <use xlink:href="#icon_order_guanli"></use>
                            </svg>
                            <div class="name">icon_880</div>
                            <div class="code-name">#icon_order_guanli</div>
                        </li>

                        <li class="dib">
                            <svg class="icon svg-icon" aria-hidden="true">
                                <use xlink:href="#icon_caiwu"></use>
                            </svg>
                            <div class="name">icon_30</div>
                            <div class="code-name">#icon_caiwu</div>
                        </li>

                        <li class="dib">
                            <svg class="icon svg-icon" aria-hidden="true">
                                <use xlink:href="#icon_user"></use>
                            </svg>
                            <div class="name">icon_130</div>
                            <div class="code-name">#icon_user</div>
                        </li>

                        <li class="dib">
                            <svg class="icon svg-icon" aria-hidden="true">
                                <use xlink:href="#icon_set_user"></use>
                            </svg>
                            <div class="name">icon_138</div>
                            <div class="code-name">#icon_set_user</div>
                        </li>

                        <li class="dib">
                            <svg class="icon svg-icon" aria-hidden="true">
                                <use xlink:href="#icon_shuju"></use>
                            </svg>
                            <div class="name">icon_170</div>
                            <div class="code-name">#icon_shuju</div>
                        </li>

                        <li class="dib">
                            <svg class="icon svg-icon" aria-hidden="true">
                                <use xlink:href="#icon_dianpu_home"></use>
                            </svg>
                            <div class="name">icon_415</div>
                            <div class="code-name">#icon_dianpu_home</div>
                        </li>

                        <li class="dib">
                            <svg class="icon svg-icon" aria-hidden="true">
                                <use xlink:href="#icon_yingyongcenter"></use>
                            </svg>
                            <div class="name">icon_436</div>
                            <div class="code-name">#icon_yingyongcenter</div>
                        </li>

                        <li class="dib">
                            <svg class="icon svg-icon" aria-hidden="true">
                                <use xlink:href="#icon_qudao"></use>
                            </svg>
                            <div class="name">icon_460</div>
                            <div class="code-name">#icon_qudao</div>
                        </li>

                        <li class="dib">
                            <svg class="icon svg-icon" aria-hidden="true">
                                <use xlink:href="#icon_qudao2"></use>
                            </svg>
                            <div class="name">icon_457</div>
                            <div class="code-name">#icon_qudao2</div>
                        </li>

                        <li class="dib">
                            <svg class="icon svg-icon" aria-hidden="true">
                                <use xlink:href="#icon_set_store"></use>
                            </svg>
                            <div class="name">icon_542</div>
                            <div class="code-name">#icon_set_store</div>
                        </li>

                        <li class="dib">
                            <svg class="icon svg-icon" aria-hidden="true">
                                <use xlink:href="#icon_dianpu_weiyem"></use>
                            </svg>
                            <div class="name">icon_545</div>
                            <div class="code-name">#icon_dianpu_weiyem</div>
                        </li>

                        <li class="dib">
                            <svg class="icon svg-icon" aria-hidden="true">
                                <use xlink:href="#icon_set_quanxian"></use>
                            </svg>
                            <div class="name">icon_595</div>
                            <div class="code-name">#icon_set_quanxian</div>
                        </li>

                        <li class="dib">
                            <svg class="icon svg-icon" aria-hidden="true">
                                <use xlink:href="#icon_hide"></use>
                            </svg>
                            <div class="name">icon_643</div>
                            <div class="code-name">#icon_hide</div>
                        </li>

                        <li class="dib">
                            <svg class="icon svg-icon" aria-hidden="true">
                                <use xlink:href="#icon_show"></use>
                            </svg>
                            <div class="name">icon_644</div>
                            <div class="code-name">#icon_show</div>
                        </li>

                        <li class="dib">
                            <svg class="icon svg-icon" aria-hidden="true">
                                <use xlink:href="#icon_wallet"></use>
                            </svg>
                            <div class="name">icon_645</div>
                            <div class="code-name">#icon_wallet</div>
                        </li>

                        <li class="dib">
                            <svg class="icon svg-icon" aria-hidden="true">
                                <use xlink:href="#icon_set_pay"></use>
                            </svg>
                            <div class="name">icon_646</div>
                            <div class="code-name">#icon_set_pay</div>
                        </li>

                        <li class="dib">
                            <svg class="icon svg-icon" aria-hidden="true">
                                <use xlink:href="#icon_set_weihu"></use>
                            </svg>
                            <div class="name">icon_663</div>
                            <div class="code-name">#icon_set_weihu</div>
                        </li>

                        <li class="dib">
                            <svg class="icon svg-icon" aria-hidden="true">
                                <use xlink:href="#icon_set_peisong"></use>
                            </svg>
                            <div class="name">icon_673</div>
                            <div class="code-name">#icon_set_peisong</div>
                        </li>

                        <li class="dib">
                            <svg class="icon svg-icon" aria-hidden="true">
                                <use xlink:href="#icon_yingxiaowf"></use>
                            </svg>
                            <div class="name">icon_684</div>
                            <div class="code-name">#icon_yingxiaowf</div>
                        </li>

                        <li class="dib">
                            <svg class="icon svg-icon" aria-hidden="true">
                                <use xlink:href="#icon_dianpu_shoppingCar"></use>
                            </svg>
                            <div class="name">icon_695</div>
                            <div class="code-name">#icon_dianpu_shoppingCar</div>
                        </li>

                        <li class="dib">
                            <svg class="icon svg-icon" aria-hidden="true">
                                <use xlink:href="#icon_goods"></use>
                            </svg>
                            <div class="name">menu_goods</div>
                            <div class="code-name">#icon_goods</div>
                        </li>

                        <li class="dib">
                            <svg class="icon svg-icon" aria-hidden="true">
                                <use xlink:href="#icon_sort"></use>
                            </svg>
                            <div class="name">menu_sort</div>
                            <div class="code-name">#icon_sort</div>
                        </li>

                        <li class="dib">
                            <svg class="icon svg-icon" aria-hidden="true">
                                <use xlink:href="#icon_danwei"></use>
                            </svg>
                            <div class="name">menu_danwei</div>
                            <div class="code-name">#icon_danwei</div>
                        </li>

                        <li class="dib">
                            <svg class="icon svg-icon" aria-hidden="true">
                                <use xlink:href="#icon_pingjia"></use>
                            </svg>
                            <div class="name">menu_pingjia</div>
                            <div class="code-name">#icon_pingjia</div>
                        </li>

                        <li class="dib">
                            <svg class="icon svg-icon" aria-hidden="true">
                                <use xlink:href="#icon_pinpai"></use>
                            </svg>
                            <div class="name">menu_pinpai</div>
                            <div class="code-name">#icon_pinpai</div>
                        </li>

                        <li class="dib">
                            <svg class="icon svg-icon" aria-hidden="true">
                                <use xlink:href="#icon_gongyingshang"></use>
                            </svg>
                            <div class="name">menu_gongyingshang</div>
                            <div class="code-name">#icon_gongyingshang</div>
                        </li>
                    </ul>
                    <div class="article markdown">
                        <h2 id="symbol-">Symbol 引用</h2>
                        <hr />

                        <p>
                            这是一种全新的使用方式，应该说这才是未来的主流，也是平台目前推荐的用法。相关介绍可以参考这篇<a
                                href=""
                                >文章</a
                            >
                            这种用法其实是做了一个 SVG 的集合，与另外两种相比具有如下特点：
                        </p>
                        <ul>
                            <li>支持多色图标了，不再受单色限制。</li>
                            <li>
                                通过一些技巧，支持像字体那样，通过
                                <code>font-size</code>, <code>color</code> 来调整样式。
                            </li>
                            <li>兼容性较差，支持 IE9+，及现代浏览器。</li>
                            <li>浏览器渲染 SVG 的性能一般，还不如 png。</li>
                        </ul>
                        <p>使用步骤如下：</p>
                        <h3 id="-symbol-">第一步：引入项目下面生成的 symbol 代码：</h3>
                        <pre><code class="language-html">&lt;script src="./iconfont.js"&gt;&lt;/script&gt;
</code></pre>
                        <h3 id="-css-">第二步：加入通用 CSS 代码（引入一次就行）：</h3>
                        <pre><code class="language-html">&lt;style&gt;
.icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}
&lt;/style&gt;
</code></pre>
                        <h3 id="-">第三步：挑选相应图标并获取类名，应用于页面：</h3>
                        <pre><code class="language-html">&lt;svg class="icon" aria-hidden="true"&gt;
  &lt;use xlink:href="#icon-xxx"&gt;&lt;/use&gt;
&lt;/svg&gt;
</code></pre>
                    </div>
                </div>
            </div>
        </div>
        <script>
            $(document).ready(function () {
                $('.tab-container .content:first').show()

                $('#tabs li').click(function (e) {
                    var tabContent = $('.tab-container .content')
                    var index = $(this).index()

                    if ($(this).hasClass('active')) {
                        return
                    } else {
                        $('#tabs li').removeClass('active')
                        $(this).addClass('active')

                        tabContent.hide().eq(index).fadeIn()
                    }
                })
            })
        </script>
    </body>
</html>
